﻿@model EM.OA.Portal.Models.SignConfigModels
@{
    Layout = "~/Views/Shared/_LayoutContent.cshtml";
    @*考勤设置*@
}
<script type="text/javascript" src="~/Scripts/page/sign/SignConfig.js"></script>
<style type="text/css">
    .left {
        vertical-align:top;
        text-align: left;
        width: 80%;
    }

    .right {
        vertical-align:top;
        text-align: right;
        width: 20%;
    }
</style>
<div>
    @*list*@
    <table id="list" class="easyui-datagrid" toolbar="#toolbar">
    </table>
    <div id="toolbar">
        <a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="add()">增加</a>
        <a href="#" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="edit()">修改</a>
        <a href="#" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="del()">删除</a>
    </div>

    @*Detail*@
    <div id="dlg" class="easyui-dialog" style="width: 650px; height: 400px; padding: 10px 20px"
        closed="true" buttons="#dlg-buttons" modal="true" resizable="true">
        <div id="dlg-buttons">
            <a href="#" class="easyui-linkbutton" iconcls="icon-ok" onclick="save()">保存</a>
            <a href="#" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
        </div>
        <form id="fm" method="post">
            @Html.HiddenFor(m => m.SignConfigID)
            <input type="hidden" name="JsonConfigDetail" id="JsonConfigDetail" />
            <input type="hidden" name ="WeekDays" id="WeekDays" />
            <table >
                <tr>
                    <td class="right">
                        @Html.LabelFor(m => m.SignName)
                    </td>
                    <td class="left">
                        <input name="SignName" class="easyui-validatebox" data-options="required:true,validType:'length[1,200]'">
                    </td>
                </tr>
                <tr>
                    <td class="right">
                        @Html.LabelFor(m => m.WeekDays)
                    </td>
                    <td class="left">
                        <input type="checkbox" name="week" id="week1" value="1" />周一&nbsp;
                        <input type="checkbox" name="week" id="week2" value="2" />周二&nbsp;
                        <input type="checkbox" name="week" id="week3" value="3" />周三&nbsp;
                        <input type="checkbox" name="week" id="week4" value="4" />周四&nbsp;
                        <input type="checkbox" name="week" id="week5" value="5" />周五&nbsp;
                        <input type="checkbox" name="week" id="week6" value="6" />周六&nbsp;
                        <input type="checkbox" name="week" id="week7" value="7" />周日&nbsp;
                    </td>
                </tr>
                <tr>
                    <td class="right">
                        @Html.LabelFor(m=>m.OpenOffset)
                    </td>
                    <td class="left">
                        <input class="easyui-numberbox" name="OpenOffset" id="OpenOffset" data-options="min:10,max:120,precision:0,required:true">分钟
                    </td>
                    
                </tr>
                <tr>
                    <td class="right">
                        @Html.LabelFor(m=>m.CloseOffset)
                    </td>
                    <td class="left">
                        <input class="easyui-numberbox" name="CloseOffset" id="CloseOffset" data-options="min:10,max:120,precision:0,required:true">分钟
                    </td>
                </tr>
                <tr>
                    <td class="right">
                        @Html.LabelFor(m=>m.Remark)
                    </td>
                    <td class="left">
                        @Html.TextAreaFor(m => m.Remark,new { @style = "width:80%", @rows = "5", @class = "easyui-validatebox" })
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <table>
                            <tr>
                                <td>上班时间</td>
                                <td>
                                    <input type="text" class="easyui-timespinner" name="txt_open" id="txt_open" /></td>
                                <td>下班时间</td>
                                <td>
                                    <input type="text" class="easyui-timespinner" name="txt_off" id="txt_off" /></td>
                                <td><a href="#" onclick="insertrow()">增加班次>></a></td>
                            </tr>
                        </table>
                    </td>
                    </tr>
                <tr>
                    <td></td>
                    <td align="left">
                        <div id="div_detail">
                            <table width="70%" id="yltable" border="1" style="border: 0px none #FFFFFF; text-align: center;">
                                <tbody id="yl1">
                                    <tr>
                                        <td>上班时间</td>
                                        <td>下班时间</td>
                                        <td>删除</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </td>
                </tr>
            </table>
        </form>
    </div>

</div>
<script type="text/javascript">

    function delrow() {
        var oElement = event.srcElement;
        while (oElement.tagName != "TR") {
            oElement = oElement.parentElement;
        }
        var oTBody = oElement.parentElement;
        oTBody.removeChild(oElement)

        var rowIndex = document.all.yltable.rows.length;
        if (rowIndex == 1) {
            $('#div_detail').hide();
        }
    }

    function insertrow() //增加的一行方法2 
    {
        var opentime = $('#txt_open').timespinner('getValue');
        var offtime = $('#txt_off').timespinner('getValue');
        if (!opentime) {alert("上班时间不能为空");return false;}
        if (!offtime) {alert("下班时间不能为空");return false;}
        if (offtime < opentime) {alert("下班时间不能小于上班时间");return false;}

        var j_1 = document.all.yltable.rows.length - 1; 
        
        if (j_1 > 3) { return false; }
        if (j_1 > 0) {
            var reOfftime = "1970-12-31 " + document.getElementById("txt_off" + (j_1 - 1)).value;
            var addopen = "1970-12-31 " + reOfftime.value;
            reOfftiem = new Date(Date.parse(reOfftime.replace(/\-/g, "/")));
            addopen = new Date(Date.parse(opentime.replace(/\-/g, "/")));

            if (addopen < reOfftime) {
                alert("上班时间不能重合！");
                return false;
            }
        }
        InsertTable(opentime,offtime,j_1);
        $('#div_detail').show();
    }

    function InsertTable(openTime,offTime,rowIndex) {
        newRow = document.all.yltable.insertRow(-1);
        newcell = newRow.insertCell();
        var obj = document.createElement("INPUT")
        obj.id = "txt_open" + rowIndex;
        obj.name = "txt_open" + rowIndex;
        obj.type = "text";
        obj.width = "100%";
        obj.value = openTime;
        obj.setAttribute("width", "100%");
        obj.setAttribute("readonly", "readonly");
        newcell.appendChild(obj);

        newcell = newRow.insertCell();
        var obj2 = document.createElement("INPUT")
        obj2.id = "txt_off" + rowIndex;
        obj2.name = "txt_off" + rowIndex;
        obj2.type = "text";
        obj2.value = offTime;
        obj2.setAttribute("width", "100%");
        obj2.setAttribute("readonly", "readonly");
        newcell.appendChild(obj2);

        newcell = newRow.insertCell();
        newcell.innerHTML = "<div align='center' style='width:30px;'><a style=' font-weight:bold;color:#999;' href='javascript:;' onclick='delrow()'>×</a></div>";

        document.all.yltable.focus();
    }

    //获取考勤配置时间明细表数据
    function GetFormInputItemValue() {
        var jsonFormInputItem = "";
        var rows = document.all.yltable.rows.length;
        if (rows > 1) {
            for (var i = 1; i < rows; i++) {
                var openName = "txt_open" + (i-1);
                var offName = "txt_off" + (i-1);
                jsonFormInputItem += "{ \"name\": \"" + openName + "\", \"value\": \"" + $('#' + openName).val() + "\"},";
                jsonFormInputItem += "{ \"name\": \"" + offName + "\", \"value\": \"" + $('#' + offName).val() + "\"},";
            }
        }
        if (jsonFormInputItem!="") {
            jsonFormInputItem = "[" + jsonFormInputItem.substr(0, jsonFormInputItem.length - 1) + "]";

            $('#JsonConfigDetail').val(jsonFormInputItem);
        }
    }

</script>
